import React,{ useState } from 'react'
import { useLocation ,useNavigate } from 'react-router-dom'
import {  NavBar ,Tag,Button} from "antd-mobile";
import img from "../../assets/1.png";
import './index.scss'

const Index:React.FC = () => {
  const navigate = useNavigate()
  const location = useLocation()
  const [gzflag,setgzflag]=useState(false)
  const [data, setData] = React.useState(location.state)
  console.log(data);
  const kg=()=>{
    setgzflag(!gzflag)
  }
  const back = () => {
    navigate(-1);
  };
  return (
    <div className='box'>
      <header>
         <NavBar
        onBack={back}
      >在线咨询</NavBar>
      </header>  
         <div id="mp4">
          <video controls id="video1">
            <source
              src="https://lf9-static.bytednsdoc.com/obj/eden-cn/uhbfnupkbps/video/earth_v6.mp4"
              type="video/mp4"
            />
          </video>
        </div>
        <main>
          <dl className='dls'>
            <dt><img src={img} alt="" /></dt>
            <dd>
                <div>
                  <p>{data.name}</p>
                  <p>{data.level}&emsp;{data.Department}</p>
                  <p>{data.yi}<Tag color="#ffe1e1">三甲</Tag></p>
                </div>
            </dd>
             
                  {gzflag ? <Button className="btnyes" onClick={() => kg()}>
                      <span className="wgzy">已关注</span>
                    </Button>:<Button className="btnno" onClick={() =>kg()}>
                      <span className="wgz">+关注</span>
                    </Button>}
                
        </dl>
        <div className='title'>
          <div className="one">
            <p>暂无</p>
            <p>挂号量</p>
          </div>

          <div className="one">
            <p>7</p>
            <p>咨询量</p>
          </div>

          <div className="one">
            <p>100%</p>
            <p>好评率</p>
          </div>

          <div className="one">
            <p>25</p>
            <p>粉丝数</p>
          </div>
        </div>
        <p>擅长：阿是垦利街道卡洛斯京东卡收垃圾大阿萨达四大</p>
          <div className='content'>
           
        <span>阿是垦利街道卡洛斯京东卡收垃圾大阿萨达四大</span><span>查看全部</span>
        </div>
         <div className="button">
        <div>
          <p>
            <img src="../../../public/image/yygh.png" />
          </p>
          <p>预约挂号</p>
          <p>未开通</p>
        </div>
        <div>
          <p>
            <img src="../../../public/image/zxzx.png" />
          </p>
          <p>在线咨询</p>
          <p>1对1咨询</p>
        </div>
        <div>
          <p>
            <img src="../../../public/image/srys.png" />
          </p>
          <p>私人医生</p>
          <p>未开通</p>
        </div>
        <div>
          <p>
            <img src="../../../public/image/zkfw.png" />
          </p>
          <p>专科服务</p>
          <p>未开通</p>
        </div>
      </div>
        </main>
      <h2 className='cca'>我主讲的课程</h2>
       <p>爱自己绽青春</p>
        <div className="mp4s">
          <video controls id="video1">
            <source
              src="https://lf9-static.bytednsdoc.com/obj/eden-cn/uhbfnupkbps/video/earth_v6.mp4"
              type="video/mp4"
            />
          </video>
        </div>
         <p>自我调试 笑对生活</p>
          <div className="mp4s">
          <video controls id="video1">
            <source
              src="https://lf9-static.bytednsdoc.com/obj/eden-cn/uhbfnupkbps/video/earth_v6.mp4"
              type="video/mp4"
            />
          </video>
        </div>
        <p>未雨绸缪守护健康</p>
          <div className="mp4s">
          <video controls id="video1">
            <source
              src="https://lf9-static.bytednsdoc.com/obj/eden-cn/uhbfnupkbps/video/earth_v6.mp4"
              type="video/mp4"
            />
          </video>
        </div>
        <p>宫颈癌疫苗二三事</p>
          <div className="mp4s">
          <video controls id="video1">
            <source
              src="https://lf9-static.bytednsdoc.com/obj/eden-cn/uhbfnupkbps/video/earth_v6.mp4"
              type="video/mp4"
            />
          </video>
        </div>
    </div>
  )
}

export default Index
